<script context="module" lang="ts">
	export type ProductsModel = {
		products: ProductModel[];
	};

	export type ProductModel = {
		title: string;
		duration: string;
		cost: string;
		description: string;
		orderLink: string;
	};
</script>

<script lang="ts">
	import CardV4 from "$components/card-v4.svelte";

	export let model: ProductsModel;

	let visible = true;
	$: if (!model.products || !model.products.length) {
		visible = false;
	} else {
		visible = true;
	}
</script>

{#if visible}
	<div class="wrapper">
		{#each model.products as product}
			<CardV4 description={product.description} title={product.title} />
		{/each}
	</div>
{/if}

<style lang="postcss">
	.wrapper {
		display: grid;
		grid-template-columns: repeat(50%);
	}
</style>
